<template>
  <view class="page">
    <!-- Header -->
    <c-nav-bar title="特殊体质" type="white" />

    <!-- Form Content -->
    <view class="px-4 pb-5 pt-4">
      <!-- Personal Information -->
      <view class="mb-4 rounded-lg bg-white p-4">
        <view class="mb-4 text-base font-medium">
          个人信息
        </view>
        <view class="space-y-4">
          <view class="flex items-center justify-between">
            <text class="text-gray-600">
              姓名
            </text>
            <text>谢之遥</text>
          </view>
          <view class="flex items-center justify-between">
            <text class="text-gray-600">
              联系电话
            </text>
            <text>18165214164</text>
          </view>
          <view class="flex items-start justify-between">
            <text class="text-gray-600">
              家庭详细地址
            </text>
            <text class="ml-4 flex-1 text-right">
              陕西省西安市莲湖区西北二路8号金格花园8号楼2单元1103
            </text>
          </view>
        </view>
      </view>

      <!-- Medical Conditions -->
      <view class="mb-4 rounded-lg bg-white p-4">
        <view class="mb-4 text-base font-medium">
          特殊体质登记表
        </view>
        <u-checkbox-group v-model="form.conditions" placement="row">
          <view class="grid grid-cols-3 flex-1 gap-2">
            <u-checkbox
              v-for="condition in conditions"
              :key="condition"
              :label="condition"
              :name="condition"
              shape="square"
              active-color="#951D1D"
            />
          </view>
        </u-checkbox-group>
      </view>

      <!-- Physical Status -->
      <view class="mb-4 rounded-lg bg-white p-4">
        <view class="space-y-4">
          <view class="flex items-center justify-between">
            <text class="text-gray-600">
              过敏
            </text>
            <text>否</text>
          </view>
          <view class="flex items-center justify-between">
            <text class="text-gray-600">
              肢体残障部位
            </text>
            <text>否</text>
          </view>
          <view class="flex items-center justify-between">
            <text class="text-gray-600">
              曾经骨折部位
            </text>
            <text>否</text>
          </view>
          <view class="flex items-center justify-between">
            <text class="text-gray-600">
              曾经手术部位
            </text>
            <text>腹部</text>
          </view>
          <view class="flex items-center justify-between">
            <text class="text-gray-600">
              是否患过肺病
            </text>
            <text>否</text>
          </view>
          <view class="flex items-center justify-between">
            <text class="text-gray-600">
              免疫系统疾病
            </text>
            <text>否</text>
          </view>
          <view class="flex items-center justify-between">
            <text class="text-gray-600">
              其他体质异常
            </text>
            <text>否</text>
          </view>
          <view class="flex items-center justify-between">
            <text class="text-gray-600">
              现在是否在使用药物
            </text>
            <text>否</text>
          </view>
        </view>
      </view>

      <!-- Additional Questions -->
      <view class="mb-4 rounded-lg bg-white p-4">
        <view class="space-y-4">
          <view class="flex items-center justify-between">
            <text class="text-gray-600">
              您孩子不宜参加的学校活动有
            </text>
            <text>没有</text>
          </view>
          <view class="flex items-center justify-between">
            <text class="text-gray-600">
              学生对自己身体的真实情况是否了解
            </text>
            <text>了解</text>
          </view>
        </view>
      </view>

      <!-- Hospital Selection -->
      <view class="mb-4 rounded-lg bg-white p-4">
        <view class="rounded bg-gray-50 p-4 text-sm">
          学生需紧急送医时，是否有指定院？如有，指定医院为
          <u-input
            v-model="form.hospital"
            placeholder="请输入"
            border="none"
            class="inline-block w-32"
          />
          （空白代表无指定医院），如未指定特殊医院，为在紧急情况下争取抢救时间，由急救中心决定送诊医院。
        </view>
      </view>

      <!-- Notes -->
      <view class="mb-4 text-sm text-gray-500 space-y-2">
        <view class="text-gray-700 font-medium">
          注意：
        </view>
        <view>1.联系号码尽可能多些共务必真实有效，如有改动请及时告知班主任。</view>
        <view>2.若所填信息需要学校予以保密，请在回执上予以注明。</view>
        <view>3.如有疾病特殊不适请反馈可能详细说明</view>
        <view>4.请详细告知您生，学生身体条件是否适合住宿。</view>
        <view>5.请家长对自己孩子的实际情况如实告知学校内容，以利于紧急情况及时处理和配合。</view>
        <view>6.如学生情况不宜过长描述可在其他体质异常处详细说明。</view>
        <view>7.以上所有信息需要家长本人认真填写，不能代替，且验证报、送诊、采集、处理。</view>
      </view>
    </view>

    <!-- Bottom Buttons -->
    <view class="m-4 flex pb-20">
      <u-button
        type="primary"
        class="previous-button"
        @click="onPrevious"
      >
        上一步
      </u-button>
      <u-button
        type="primary"
        class="next-button"
        @click="onNext"
      >
        下一步
      </u-button>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue';

const conditions = [
  '心脏病',
  '重症病',
  '软骨病',
  '肾病',
  '重度病',
  '易感慢性',
  '糖尿病',
  '哮喘',
  '肝炎',
  '胃肠病',
  '配气',
  '肺结核',
  '其他',
];

const form = reactive({
  conditions: [],
  hospital: '',
});

const onPrevious = () => {
  uni.navigateBack();
};

const onNext = () => {
  uni.navigateTo({
    url: '/pages/biz/special/receipt',
  });
};
</script>

<style lang="scss" scoped>
//
.previous-button{
  border-radius: 20px 0 0 20px;
}
.next-button{
  border-radius: 0 20px 20px 0;
}
</style>
